<template>
  <div
    style="float: left;background-color: white;margin-top: -50px;width: 100%">
    <div style="margin-top: 100px">
      <el-row style="margin-left: 50px">
        <el-col span="10">
          <span style="font-size: larger">滋补调养</span>
          <el-divider></el-divider>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span style="font-size: larger">感冒咳嗽</span>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px">
        <el-col span="10">
          <span>补肾</span>
          <el-divider direction="vertical" ></el-divider>
          <span>补气血</span>
          <el-divider direction="vertical"></el-divider>
          <span>安神助眠</span>
          <el-divider direction="vertical"></el-divider>
          <span>心脏疾病</span>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span>感冒发烧</span>
          <el-divider direction="vertical" ></el-divider>
          <span>咳嗽</span>
          <el-divider direction="vertical"></el-divider>
          <span>哮喘</span>
          <el-divider direction="vertical"></el-divider>
          <span>上火</span>
          <el-divider direction="vertical" ></el-divider>
          <span>小儿感冒支气管炎</span>
          <el-divider direction="vertical"></el-divider>
          <span>头痛</span>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px;margin-top: 25px">
        <el-col span="10"><span style="font-size: larger">肠胃用药</span>
          <el-divider></el-divider></el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span style="font-size: larger">维钙保健</span>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px">
        <el-col span="10">
          <span>肠胃不适</span>
          <el-divider direction="vertical" ></el-divider>
          <span>消化不良</span>
          <el-divider direction="vertical"></el-divider>
          <span>腹泻</span>
          <el-divider direction="vertical"></el-divider>
          <span>便秘</span>
          <el-divider direction="vertical"></el-divider>
          <span>小儿肠胃病</span>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span>维矿物质</span>
          <el-divider direction="vertical" ></el-divider>
          <span>补充钙质</span>
          <el-divider direction="vertical"></el-divider>
          <span>营养补益</span>
          <el-divider direction="vertical"></el-divider>
          <span>孕婴专区</span>
          <el-divider direction="vertical" ></el-divider>
          <span>清畅瘦身</span>
          <el-divider direction="vertical"></el-divider>
          <span>调节三高</span>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px;margin-top: 50px">
        <el-col span="10">
          <span style="font-size: larger">皮肤用药</span>
          <el-divider></el-divider>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span style="font-size: larger">热门品类</span>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px">
        <el-col span="10">
          <span>皮炎湿疹</span>
          <el-divider direction="vertical" ></el-divider>
          <span>祛痘除疤</span>
          <el-divider direction="vertical"></el-divider>
          <span>抗菌止痒</span>
          <el-divider direction="vertical"></el-divider>
          <span>蚊虫叮咬</span>
          <el-divider direction="vertical"></el-divider>
          <span>皮肤过敏</span>
          <el-divider direction="vertical"></el-divider>
          <span>烧烫伤</span>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span>江西汇仁</span>
          <el-divider direction="vertical" ></el-divider>
          <span>同仁堂</span>
          <el-divider direction="vertical"></el-divider>
          <span>九芝堂</span>
          <el-divider direction="vertical"></el-divider>
          <span>东阿阿胶</span>
          <el-divider direction="vertical" ></el-divider>
          <span>白云山</span>
          <el-divider direction="vertical"></el-divider>
          <span>仁和</span>
          <el-divider direction="vertical"></el-divider>
          <span>康王</span>
          <el-divider direction="vertical"></el-divider>
          <span>江中</span>
        </el-col>
      </el-row>
    </div>
<!--    <div-->
<!--      style="float: left;background-color: white;border: 2px solid white;border-radius:20px;margin-left: 150px;margin-top: 60px;width: 1200px;height: 350px;">-->
<!--      <div-->
<!--        style="float: left;border-radius:20px;margin-top:-10px;margin-left: 1px;width: 1200px ;height:40px;border-bottom: 1px solid rgba(204,204,204,0.55) ;background-color: rgba(204,204,204,0.92)">-->
<!--        <div style="float: left;margin-top: -10px;margin-left: 15px">-->
<!--          <p style="font-family: 黑体;font-size: 20px">属性筛选(共有12种商品)</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div-->
<!--        style="background-color: white;float: left;margin-top:20px;margin-left: 10px;width: 1100px;height:55px;border-bottom: 1px solid rgba(204,204,204,0.55) ">-->
<!--        <el-row>-->
<!--          <el-col span="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品牌</el-col>-->
<!--          <el-col span="5">-->
<!--            <el-button type="" @click="nik()"><img width="50px" height="20px" src="../../../assets/nike.jpg">-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--          <el-col span="5">-->
<!--            <el-button type="" @click="adid()"><img width="50px" height="20px" src="../../../assets/adidas.jpg">-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--          <el-col span="5">-->
<!--            <el-button type="" @click="Li()"><img width="50px" height="20px" src="../../../assets/Li-Ning.jpg">-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--          <div style="margin-left: 1000px;margin-top: 0px">-->
<!--            <el-button type="" v-on:click="">更多+</el-button>-->
<!--          </div>-->
<!--        </el-row>-->

<!--      </div>-->
<!--      <div-->
<!--        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 1px solid rgba(204,204,204,0.55) ">-->
<!--        <el-row>-->
<!--          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尺码</el-col>-->
<!--          <el-col span="3">36</el-col>-->
<!--          <el-col span="3">37</el-col>-->
<!--          <el-col span="3">38</el-col>-->
<!--          <el-col span="3">38</el-col>-->
<!--          <el-col span="3">38</el-col>-->
<!--          <div style="margin-left: 1000px;margin-top: -20px">-->
<!--            <el-button type="" v-on:click="">更多+</el-button>-->
<!--          </div>-->
<!--        </el-row>-->
<!--      </div>-->
<!--      <div-->
<!--        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 1px solid rgba(204,204,204,0.55) ">-->
<!--        <el-row>-->
<!--          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格</el-col>-->
<!--          <el-col span="3">100-200</el-col>-->
<!--          <el-col span="3">200-300</el-col>-->
<!--          <el-col span="3">300-400</el-col>-->
<!--          <el-col span="3">400-500</el-col>-->
<!--          <el-col span="3">500-600</el-col>-->
<!--          <div style="margin-left: 1000px;margin-top: -20px">-->
<!--            <el-button type="" v-on:click="">更多+</el-button>-->
<!--          </div>-->
<!--        </el-row>-->
<!--      </div>-->
<!--      <div-->
<!--        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 0.5px solid rgba(204,204,204,0.55) ">-->
<!--        <el-row>-->
<!--          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;材质</el-col>-->
<!--          <el-col span="3">布</el-col>-->
<!--          <el-col span="3">超纤布</el-col>-->
<!--          <el-col span="3">皮质</el-col>-->
<!--          <el-col span="3">网眼布</el-col>-->
<!--          <el-col span="3">合成材料</el-col>-->
<!--          <div style="margin-left: 1000px;margin-top: -20px">-->
<!--            <el-button type="" v-on:click="">更多+</el-button>-->
<!--          </div>-->
<!--        </el-row>-->
<!--      </div>-->
<!--    </div>-->
    <div
      style="background-color: white;width: 1200px;border: 2px solid white;border-radius:20px;margin-left: 100px;margin-top: 70px;height: auto">
      <el-row>
        <el-col>
          <el-card body-style="{ padding:'0px' }" class="goods" v-for="(index) in goods " shadow="hover" :key="n">
            <a v-on:click="goodsMsg(index)">
              <img :src="index.img" alt="" class="goodsImg">
              <div class="goodsName">{{index.goods}}</div>
              <div class="goodsBrand">{{index.brand}}</div>
              <div class="goodsPrice">￥{{index.price}}</div>
            </a>
            <el-button style="margin-left: 20px" type="warning" plain>直接购买</el-button>
            <el-button type="warning" class="el-icon-shopping-cart-2">加入购物车</el-button>
          </el-card>
        </el-col>
      </el-row>
      <div>
        <img src="../../../assets/end.png" style="width: 800px;height: 70px;margin-left:27%">
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "WomanSkate",
    data() {
      return {
        goods: [],
      }
    },
    mounted() {
      this.womanSkate();
      this.nike();
    },
    methods: {
      womanSkate() {
        this.$http.post('http://localhost:8888/shopping/woman', {type: 2}, {emulateJSON: true}).then(res => {
          this.goods = res.data.data;
          console.log(goods);
        })
      },
      nike() {
        this.$http.post('http://localhost:8888/shopping/woman', {type: 2,brand: Nike} ,{emulateJSON: true}).then(res => {
          this.goods = res.data.data;
          console.log(goods);
        })
      },
      goodsMsg(index) {
        console.log(index);
        this.$router.push({path:'/DetailsLayout', query:{price:index.price,brand:index.brand,img:index.img,type:index.type}});
      }
    }
  }
</script>

<style>
  .goods {
    float: left;
    border: 0px solid #000;
    margin: 35px;
    width: 330px;
    height: 450px;
    border-radius: 23px;
  }

  .goodsImg {
    /*border: 1px solid ;*/
    float: left;
    margin-left: -19px;
    margin-top: -20px;
    width: 330px;
    height: 300px;
    border-radius: 23px;



  }

  .goodsName {
    /*border: 3px solid #d23030;*/
    margin-left: 40px;
    width: 270px;

  }

  .goodsBrand {
    /*border: 3px solid #6acb2e;*/
    margin-left: 90px;
    width: 70px;

  }

  .goodsPrice {
    /*border: 3px solid #3071d2;*/
    color: #ff3213;
    font-size: 20px;
    width: 70px;
  }
</style>

